<template>
    <div>
      <!--    面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><b>题目管理</b></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/FindTest' }">题库</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #545c99">我创建的题目</span></el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <h1>我创建的题目</h1>
        <!--      搜索与添加区域-->
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input placeholder="请输入内容" v-model="queryInfo.searchInfo" clearable @clear="getTestList">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-button @click="JumpToAdd" class="new_btn">
              <svg class="icon_add" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <polygon id="路径" fill="#FFFFFF" points="11.34223 8.55450006 11.34223 1.52678484 8.5311359 1.52678484 8.5311359 8.55450006 1.50342068 8.55450006 1.50342068 11.3655941 8.5311359 11.3655941 8.5311359 18.3933093 11.34223 18.3933093 11.34223 11.3655941 18.3699652 11.3655941 18.3699652 8.55450006"></polygon>
              </svg>
              创建新题目
            </el-button>
          </el-col>
        </el-row>
        <br>
        <el-tabs type="border-card">
<!--          全部题目-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-s-opportunity"></i>全部题目</span>
            <span style="color: slategray; font-size: 15px"> <i class="el-icon-s-promotion"></i> 可用题目: {{this.pagetestlist.length}} 题</span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pagetestlist" :stripe="true"  >
<!--              <el-table-column type="selection"></el-table-column>@selection-change="handleSelectionChange"-->
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型" :filters="[{text:'实验题', value: 'experience'},{text:'简答题', value: 'essay'},{text:'填空题', value: 'fill'},{text:'单选题', value: 'select'},{text:'多选题', value: 'muti'},{text:'判断题', value: 'judge'}]"
                               :filter-method="filterTag"
                               filter-placement="bottom-end">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          :type="scope.row.type === 'experience' || scope.row.type === 'essay' || scope.row.type === 'fill' ? 'primary' : 'success'" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
<!--          实验题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-document"></i>实验题</span>
            <span style="color: slategray; font-size: 15px"> <i class="el-icon-s-promotion"></i> 可用题目: {{this.pageExplist.length}} 题</span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageExplist" :stripe="true">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageExplist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
<!--          简答题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-edit-outline"></i>简答题</span>
            <span style="color: slategray; font-size: 15px"><i class="el-icon-s-promotion"></i> 可用题目: {{this.pageEssaylist.length}} 题</span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageEssaylist" :stripe="true">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageEssaylist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
<!--          填空题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-edit"></i>填空题</span>
            <span style="color: slategray; font-size: 15px"><i class="el-icon-s-promotion"></i> 可用题目: {{this.pageFilllist.length}} 题 </span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageFilllist" :stripe="true">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageFilllist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
<!--          判断题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-finished"></i>判断题</span>
            <span style="color: slategray; font-size: 15px"> <i class="el-icon-s-promotion"></i> 可用题目: {{this.pageJudgelist.length}} 题</span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageJudgelist" :stripe="true">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageJudgelist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
<!--          单选题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-circle-check"></i>单选题</span>
            <span style="color: slategray; font-size: 15px"> <i class="el-icon-s-promotion"></i> 可用题目: {{this.pageSellist.length}} 题</span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageSellist" :stripe="true">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageSellist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
<!--          多选题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-document-checked"></i>多选题</span>
            <span style="color: slategray; font-size: 15px"> <i class="el-icon-s-promotion"></i> 可用题目: {{this.pageMutilist.length}} 题</span>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageMutilist" :stripe="true">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope" v-if="scope.row.type === 'muti'">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
              <!--        操作-->
              <el-table-column align="center" label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <!--              修改题目按钮-->
                  <el-tooltip effect="dark" content="修改题目" placement="top">
                    <el-button style="background-color: #545c64;color: white" icon="el-icon-edit" size="mini" :enterable="false" @click="editTestDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <!--              删除题目按钮-->
                  <el-tooltip effect="dark" content="删除题目" placement="bottom">
                    <el-button type="danger" icon="el-icon-delete" size="mini" :enterable="false" @click="removeTestById(scope.row.id,scope.row.teacher)"></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageMutilist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
<!--        题目列表区域-->
      </el-card>
<!--      修改题目的对话框-->
      <el-dialog
        title="修改题目"
        :visible.sync="TestDialogVisible"
        width="58%" @close="TestDialogClosed">
        <!--      内容主体区域-->
        <el-form label-width="100px" status-icon :model="AddTestForm" ref="AddTestFormRef">
          <el-form-item label="题目名字" prop="name" required>
            <el-input v-model="AddTestForm.name" autocomplete="off" placeholder="请输入题目名字"></el-input>
          </el-form-item>
          <el-form-item label="题目类型" prop="type" required>
            <el-select v-model="AddTestForm.type" placeholder="请选择题目类型">
              <el-option label="单选题" value="select"></el-option>
              <el-option label="多选题" value="muti"></el-option>
              <el-option label="填空题" value="fill"></el-option>
              <el-option label="简答题" value="essay"></el-option>
              <el-option label="实验题" value="experience"></el-option>
              <el-option label="判断题" value="judge"></el-option>
            </el-select>
          </el-form-item>
          <!--          填空题-->
          <el-form-item label="填空题答案(选填)" v-show="AddTestForm.type === 'fill' ? true : false">
            <el-input v-model="AddTestForm.fillAnswer" placeholder="请输入该填空题答案(选填)"></el-input>
          </el-form-item>
          <!--        本题总分-->
          <el-form-item label="本题总分" required v-show="AddTestForm.type === 'fill' ? true : false">
            <el-input-number v-model="grade2" label="本题总分"></el-input-number>
          </el-form-item>
          <!--          选择题-->
          <el-collapse v-model="activeNames"  v-show="AddTestForm.type === 'select' ? true : false">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="color: cornflowerblue">编辑单选题选项内容 </span><i class="header-icon el-icon-info"></i>
              </template>
              <el-form-item label="A选项题目(选填)">
                <el-input v-model="AddTestForm.selectA" placeholder="请输入A选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="B选项题目(选填)">
                <el-input v-model="AddTestForm.selectB" placeholder="请输入B选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="C选项题目(选填)">
                <el-input v-model="AddTestForm.selectC" placeholder="请输入C选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="D选项题目(选填)">
                <el-input v-model="AddTestForm.selectD" placeholder="请输入D选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
          <el-form-item label="单选题答案(选填)" v-show="AddTestForm.type === 'select' ? true : false">
            <el-select v-model="AddTestForm.selectAnswer" placeholder="请输入该单选题答案（选填）">
              <el-option label="选项A" value="A"></el-option>
              <el-option label="选项B" value="B"></el-option>
              <el-option label="选项C" value="C"></el-option>
              <el-option label="选项D" value="D"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本题总分" required v-show="AddTestForm.type === 'select' ? true : false">
            <el-input-number v-model="grade2" :min="0" label="本题总分"></el-input-number>
          </el-form-item>
          <!--          多选题-->
          <el-collapse v-model="activeNames"  v-show="AddTestForm.type === 'muti' ? true : false">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="color: cornflowerblue">编辑多选题选项内容 </span><i class="header-icon el-icon-info"></i>
              </template>
              <el-form-item label="A选项题目(选填)">
                <el-input v-model="AddTestForm.selectA" placeholder="请输入A选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="B选项题目(选填)">
                <el-input v-model="AddTestForm.selectB" placeholder="请输入B选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="C选项题目(选填)">
                <el-input v-model="AddTestForm.selectC" placeholder="请输入C选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="D选项题目(选填)">
                <el-input v-model="AddTestForm.selectD" placeholder="请输入D选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
          <el-form-item label="多选题答案(选填)" v-show="AddTestForm.type === 'muti' ? true : false ">
            <template>
              <el-checkbox-group v-model="checkedChoice" @change="handleCheckedChoiceChange">
                <el-checkbox v-for="select in choice" :value="select" :label="select" :key="select">{{select}}</el-checkbox>
              </el-checkbox-group>
              <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            </template>
          </el-form-item>
          <el-form-item label="本题总分" required v-show="AddTestForm.type === 'muti' ? true : false">
            <el-input-number v-model="grade3" :min="0" label="本题总分"></el-input-number>
          </el-form-item>
          <!--          判断题-->
          <el-collapse v-model="activeNames"  v-show="AddTestForm.type === 'judge' ? true : false">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="color: cornflowerblue">编辑判断题选项内容 </span><i class="header-icon el-icon-info"></i>
              </template>
              <el-form-item label="判断正确选项(选填)">
                <el-input v-model="AddTestForm.judgeTrue" placeholder="请输入正确选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
              <el-form-item label="判断错误选项(选填)">
                <el-input v-model="AddTestForm.judgeFalse" placeholder="请输入错误选项内容" suffix-icon="el-icon-edit"></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
          <el-form-item label="判断题答案(选填)" v-show="AddTestForm.type === 'judge' ? true : false ">
            <el-row>
              <el-col :span="6">
                <el-switch
                  :disabled="jinyong"
                  v-model="panduan"
                  active-text="正确"
                  inactive-text="错误">
                </el-switch>
              </el-col>
              <el-col :span="6">
                <el-tag @click="JinYong">
                  {{this.tishi}}<i :class="tubiao"></i>
                </el-tag>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="本题总分" required v-show="AddTestForm.type === 'judge' ? true : false">
            <el-input-number v-model="grade1" :min="0" label="本题总分"></el-input-number>
          </el-form-item>
          <!--          简答题-->
          <el-form-item label="本题总分" required v-show="AddTestForm.type === 'essay' ? true : false">
            <el-input-number v-model="grade4" :min="0" label="本题总分"></el-input-number>
          </el-form-item>
          <!--          实验题-->
          <el-form-item label="本题总分" required v-show="AddTestForm.type === 'experience' ? true : false">
            <el-input-number v-model="grade5" :min="0" label="本题总分"></el-input-number>
          </el-form-item>
        </el-form>

        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
           <el-row>
          <el-col :span="4" :offset="5" >
            <el-button class="white_btn" @click="resetTest">重 置</el-button>
          </el-col>
          <el-col :span="4" :offset="5">
            <el-button class="new_btn" @click="editTest">修 改</el-button>
          </el-col>
        </el-row>
        </span>
      </el-dialog>

      <!--      题目概述-->
      <el-drawer
        :visible.sync="DrawSign"
        size="48%"
        title="题目概述">
        <div class="all">
          <div class="draw">
            <el-page-header @back="DrawSign=false" content="详情页面">
            </el-page-header>
            <h1 style="font-size: 25px">{{this.TestContent.name}} ({{this.TestContent.totalScore}}分)</h1>
            <el-divider></el-divider>
            <el-row :gutter="20" style="font-size: 15px">
              <el-col :span="3">
                <span><b>编号</b></span>
              </el-col>
              <el-col :span="6">
                <span><b>题目类型</b></span>
              </el-col>
              <el-col :span="5">
                <span><b>创建者</b></span>
              </el-col>
              <el-col :span="8">
                <span><b>更新时间</b></span>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="20" style="font-size: 14px">
              <el-col :span="3">
                <span>{{this.TestContent.id}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{this.TestContent.type}}</span>
              </el-col>
              <el-col :span="5">
                <span>{{this.TestContent.author}}</span>
              </el-col>
              <el-col :span="8">
                <span>{{this.TestContent.updateTime}}</span>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <span v-if="this.TestContent.content" class="contents">{{this.TestContent.content}} ({{this.TestContent.totalScore}})</span>
            <span v-else class="contents" style="color: #545c64">暂无题目描述</span>
            <br><br>
            <el-row>
              <el-col :span="3" v-if="TestContent.doc">
                <el-tooltip class="item" effect="dark" content="下载doc文件" placement="bottom">
                  <el-button size="small"  @click="DownloadDoc(TestContent.doc)"><i class="el-icon-download"></i><i class="el-icon-document"></i></el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="3"  v-if="TestContent.mp4">
                <el-tooltip class="item" effect="dark" content="下载mp4文件" placement="bottom">
                  <el-button size="small"  @click="DownloadMp4(TestContent.mp4)"><i class="el-icon-download"></i><i class="el-icon-video-camera"></i></el-button>
                </el-tooltip>
              </el-col>
            </el-row>
          </div>
          <div class="foot2"></div>
          <div class="foot">
            <el-row class="anniu">
              <el-col :offset="5" :span="9">
                <el-button class="white_btn">
                  <i class="el-icon-s-promotion">查看完整详情页</i>
                </el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-drawer>
    </div>
</template>

<script>
  import axios from 'axios'
  var fileDownload = require("js-file-download");
  const choiceOptions = ['A', 'B', 'C', 'D']
  export default {
  name: 'MyTestInfo',
  data () {
    return {
      // 获取创建题目列表的参数对象
      queryInfo: {
        // 模糊搜索
        searchInfo: '',
        // 当前页数
        pagenum: 1,
        pagesize: 10
      },
      testlist: [],
      total: 0,
      SelectAll: [],
      TestDialogVisible:false, // 修改题目对话框开关
      AddTestForm: {
        name: '',
        type: '',
        author: localStorage.getItem('name'),
        teacher: localStorage.getItem('username'),
        fillAnswer: '',
        selectA: '',
        selectB: '',
        selectC: '',
        selectD: '',
        selectAnswer: '',
        mutiAnswer: '', // this.checkedChoice.join()
        judgeTrue: '',
        judgeFalse: '',
        judgeAnswer: '', // panduan
        totalScore: ''
      },
      checkAll: false,
      checkedChoice: [],
      choice: choiceOptions,
      isIndeterminate: true,
      panduan: true,
      jinyong: false,
      grade1: 1, // judge
      grade2: 2, // select,fill
      grade3: 4, // muti
      grade4: 10, // essay
      grade5: 30, // experience
      tubiao: 'el-icon-error',
      tishi: '禁用',
      activeNames: [''],
      active: 0,
      All_loading: true, // 数据加载
      DrawSign: false,
      TestContent: [],
      TestSetList: [],
    }
  },
  created () {
    this.getTestList()
  },
  methods: {
    async getTestList () {
      const { data: res } = await this.$http.get('/test/findByTeacher/' + localStorage.getItem('username'))
      if (res.status !== 200) {
        return this.$message.error('获取题目列表失败!')
      }
      this.testlist = res.data
      if (this.testlist.length === res.data.length){
        this.total = res.data.length
        this.All_loading = false
      }
      console.log(res.data)
    },
    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getTestList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getTestList()
    },
    filterTag (value, row) {
      return row.type === value
    },
    // handleSelectionChange (val) {
    //   this.SelectAll = val
    //   // console.log(this.SelectAll)
    // },
    //  跳转到添加题目
    JumpToAdd(){
      let path = 'AddTest'
      this.$router.push(path)
    },
    // 删除题目
    async removeTestById (id,teacher) {
      const confirmResult = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('/test/delete/',{data:{testId:id,teachId:teacher}} )
      if (res.status !== 200) {
        return this.$message.error('删除题目失败！')
      }
      this.$message.success('删除题目成功!')
      this.getTestList()
    },
    resetTest () {
      this.$refs.AddTestFormRef.resetFields()
    },
    // 监听修改题目对话框的关闭事件
    TestDialogClosed () {
      this.$refs.AddTestFormRef.resetFields()
    },
    // 修改题目
    editTestDialog(list) {
      this.TestDialogVisible = true
      console.log(list)
      this.AddTestForm = list
    },
    handleCheckAllChange (val) {
      this.checkedChoice = val ? choiceOptions : []
      this.isIndeterminate = false
    },
    handleCheckedChoiceChange (value) {
      var checkedCount = value.length
      this.checkAll = checkedCount === this.choice.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.choice.length
    },
    editTest(){
      var type = this.AddTestForm.type
      if (type === 'select' || type === 'fill') {
        this.AddTestForm.totalScore = this.grade2
      } else if (type === 'muti') {
        this.AddTestForm.totalScore = this.grade3
        if (this.checkedChoice) {
          this.AddTestForm.mutiAnswer = this.checkedChoice.join('')
          console.log(this.AddTestForm.mutiAnswer)
          console.log(this.AddTestForm.selectA)
        }
      } else if (type === 'essay') {
        this.AddTestForm.totalScore = this.grade4
      } else if (type === 'experience') {
        this.AddTestForm.totalScore = this.grade5
      } else if (type === 'judge') {
        this.AddTestForm.totalScore = this.grade1
        if (!this.jinyong) {
          if (this.panduan) {
            this.AddTestForm.judgeAnswer = 'true'
          } else {
            this.AddTestForm.judgeAnswer = 'false'
          }
        }
      }
      console.log(this.AddTestForm.totalScore)
      console.log(this.AddTestForm)
      this.$refs.AddTestFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        // 调用接口进行用户添加
        axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
        const { data: res } = await this.$http.put('/test/update/', this.AddTestForm)
        if (res.status !== 200) {
          console.log(res)
          return this.$message.error('修改题目失败！')
        }
        this.$message.success('修改题目成功!')
        // this.active = 1
        this.TestDialogVisible = false
        this.getTestList()
        console.log(this.AddTestForm)
      })
    },
    JinYong () {
      this.jinyong = !this.jinyong
      this.tubiao = 'el-icon-success'
      this.tishi = '选用'
    },
  //  题目详情
    async getTestContent (testId) {
      const { data: res } = await this.$http.get('/test/find/' + testId)
      if (res.status !== 200) {
        return this.$message.error('获取题目概述失败!')
      }
      this.TestContent = res.data
      this.DrawSign = true
      var update = res.data.updateTime
      this.TestContent.updateTime = update.slice(0, 10)
      var doc = res.data.doc
      this.TestContent.doc = doc
      var video = res.data.mp4
      this.TestContent.mp4 = video
      console.log(this.TestContent.doc)
      console.log(doc)
    },
    DownloadDoc (strurl) {
      var index = strurl.lastIndexOf('/doc/')
      var url = strurl.substring(index,strurl.length)
      let name = strurl.substring(index+5,strurl.length)
      console.log(url)
      console.log(name)
      return new Promise(() => {
        this.$http.get('/file'+url,{ responseType: 'arraybuffer'}).then(res => {
          // resolve(res)
          let fileName = name
          fileDownload(res.data,fileName);
        }).catch(error => {
          this.$message.error('下载失败!该文件不见啦！')
          console.log(error)
        })
      })
    },
    async DownloadMp4 (strurl) {
      var index = strurl.lastIndexOf('/mp4/')
      var url = strurl.substring(index,strurl.length)
      let name = strurl.substring(index+5,strurl.length)
      return new Promise(() => {
        this.$http.get('/file'+url,{ responseType: 'arraybuffer'}).then(res => {
          // resolve(res)
          let fileName = name
          fileDownload(res.data,fileName);
        }).catch(error => {
          this.$message.error('下载失败!该文件不见啦！')
          console.log(error)
        })
      })
    },
  },
  computed: {
    pagetestlist: function () {
      var search = this.queryInfo.searchInfo
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageExplist: function () {
      var search = 'experience'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageEssaylist: function () {
      var search = 'essay'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageFilllist: function () {
      var search = 'fill'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageJudgelist: function () {
      var search = 'judge'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageSellist: function () {
      var search = 'select'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageMutilist: function () {
      var search = 'muti'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
  }
}
</script>

<style scoped>

</style>
